<script setup lang="ts">
import { ref } from 'vue'
import imgUrl1 from '@assets/img/资产配置.jpg'
import imgUrl2 from '@assets/img/资产配置1.jpeg'
import imgUrl3 from '@assets/img/资产配置3.jpeg'
// const imgUrl3 = new URL('@assets/img/资产配置1.jpeg', import.meta.url).href
// import { definfeComponent } from 'vue'
// definfeComponent(Demo)
</script>
<template>
  <div>
    <div>组件card页面</div>
    <Card :imgSrc="imgUrl1" summary="面试突破-fiber架构原理是什么"></Card>
    <Card :imgSrc="imgUrl2" summary="面试突破-hooks的原理是什么">
      <template v-slot:footer>
        <div class="footer">
          <div class="level">中级·600人报名</div>
          <div class="price">￥299</div>
        </div>
      </template>
    </Card>
    <Card
      :imgSrc="imgUrl3"
      summary="面试突破-useEffect的原理是什么"
      :width="370"
      :imgHeight="90"
    >
      好好学习，天天向上
      <template v-slot:footer>
        <div class="footer-spring">
          <div class="level">中级·600人报名</div>
          <div class="price">￥299</div>
        </div>
      </template>
    </Card>
  </div>
</template>
<style lang="scss">
.level {
  color: #666;
  margin-bottom: 8px;
}
.price {
  color: #f00;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12px;
}
.footer-spring {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12px;
}
</style>
